<template>
<div>
  <div class="debug-wrap" v-show="show">
    <pre><code>{{slide | json}}</code></pre>
  </div>  
</div>
</template>
<script>
  export default {
    data: function(){
      return {
        show: false
      }
    },
    props: {
      slide: {
        type: Object,
        required: true
      }
    },
    attached: function(){
      console.log('attached');
      this.$nextTick(function(){
        $(this.$el).find('.debug-wrap').draggable();
      });
    }, 
    events: {
      'toggle-debug': function(){
        this.show = !this.show;
      }
    }
  }
</script>
<style>
  .debug-wrap{
    position: absolute;
    top: 0;
    z-index: 1000;
    width: 420px;
    padding: 4px;
    height: 650px;
    overflow: auto;    
  }
  .debug-wrap pre {
    padding: 4px;
  }
</style> 